<template>
  <view class="flex flex-col flex-1 relative">
    <view
      class="itemPos flex flex-col relative"
      :class="[_position == 'right' ? 'flex-col-top-end' : '']"
      :style="[
        _position == 'left' ? { left: '64rpx' } : '',
        _position == 'right' ? { right: '64rpx' } : '',
        _position == 'center' ? { transform: 'translateX(50%)' } : '',
        {top:'0rpx'}
      ]"
    >
      <tm-sheet
        :border="props.border"
        :borderDirection="_position == 'center' ? 'left' : _position"
        :_class="['flex flex-col flex-col-top-start']"
        class="flex-1"
        parenClass="flex-1"
        :transprent="true"
        :margin="[0, 0]"
        :padding="[0, 0]"
      >
        <view
          class="pb-24 flex-1 "
          :style="[
            _position == 'left' || _position == 'center'
              ? { paddingLeft: _posSizeWidth + 'rpx' ,marginRight:'132rpx'}
              : '',
            _position == 'right' ? { paddingRight: _posSizeWidth + 'rpx',marginLeft:'132rpx' } : '',
          ]"
        >
            <tm-text v-if="_time" _style="line-height:20rpx;" _class="pb-16" :label="_time" :fontSize="24" :color="props.color"></tm-text>
            <slot></slot>
          
        </view>
      </tm-sheet>
    </view>
    <view v-if=" _position == 'center'"
      :style="[{
              transform: `translateX(50%)`,
              height: _posSizeWidth + 'rpx',
              left: -_posX + 'px',
            }]"
      class=""
    >
      <view
        class="absolute t-0 flex flex-col flex-col-center-center"
        :style="[
          { transform: `translateX(${_posX / 2}px)` },
          { width: _posSizeWidth + 'rpx', height: _posSizeWidth + 'rpx' },
        ]"
      >
        <tm-sheet
          _class="flex flex-center"
          :round="10"
          :shadow="2"
          :color="props.color"
          :width="_posSize"
          :height="_posSize"
          :margin="[0, 0]"
          :padding="[0, 0]"
        >
          <tm-icon v-if="_icon" :fontSize="20" :name="_icon"></tm-icon>
        </tm-sheet>
      </view>
    </view>
    <view
    v-if=" _position == 'left'|| _position == 'right'"
        class="absolute t-0 flex flex-col"
        :class="[
          _position == 'left' ? 'l-0 flex-col-top-center' : '',
          _position == 'right' ? 'r-0 flex-col-top-center' : '',
          _position == 'center' ? 'flex-col-center-center' : '',
        ]"
        :style="[
          _position == 'left' || _position == 'right'
            ? { transform: `translateX(${_position == 'left' ? _posX : -_posX}px)` }
            : '',
          _position == 'center' ? { transform: `translateX(${_posX / 2}px)` } : '',
          { width: _posSizeWidth + 'rpx', height: _posSizeWidth + 'rpx' },
        ]"
      >
        <tm-sheet
          _class="flex flex-center"
          :round="10"
          :shadow="0"
          :border="props.type=='outlined'?3:0"
          :text="props.type=='outlined'?true:false"
          :color="props.color"
          :width="_posSize"
          :height="_posSize"
          :margin="[0, 0]"
          :padding="[0, 0]"
        >
          <tm-icon v-if="_icon" :fontSize="20" :name="_icon"></tm-icon>
        </tm-sheet>
      </view>
  </view>
</template>
<script lang="ts" setup>
/**
 * 时间轴-子组件
 * @description 内部只可放置在 tm-timeline组件中，不可单独使用。
 */
import { computed, inject } from "vue";
import tmSheet from "../tm-sheet/tm-sheet.vue";
import tmText from "../tm-text/tm-text.vue";
import tmIcon from "../tm-icon/tm-icon.vue";
const props = defineProps({
  size: {
    type: Number,
    default: 24,
  },
  color: {
    type: String,
    default: "primary",
  },
  icon: {
    type: String,
    default: "",
  },
  border:{
      type:Number,
      default:2
  },
  //outlined,fill
  type:{
      type:String,
      default:'outlined'
  },
  //时间，不提供默认不显示。
  time:{
      type:String,
      default:''
  }
});
const _time = computed(()=>props.time)
const _position = inject('tmTimeLinePosition',computed(()=>'left'))

const _posSize = computed(() => {
  return props.size;
});
const _posSizeWidth = computed(() => {
  return props.size + props.size / 2;
});

const _posX = computed(() => {
  let l = uni.upx2px(64 - _posSizeWidth.value / 2 +props.border);
  return l;
});

const _icon = computed(() => props.icon);
</script>
<style scoped>
.itemPos {
  /* #ifndef APP-NVUE */
  min-height: 80rpx;
  /* #endif */
}
</style>
